export const Progress1 = () => {
    return `
<template>
    <div
      class="content"
   
    >
     <div :ref="echartsMap" id="mainChina"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, nextTick, onMounted, watch } from "vue";
  import "echarts";
  let value = 20.66;
let title = '%';
  const state = reactive({
    option:  {
    title: {
        text: '{b|销售额度}\\n{a|' + value + '%}',
        x: 'center',
        y: 'center',
        textStyle: {
            rich: {
              
                b: {
                    fontSize: 38,
                    color: 'rgba(211, 228, 254, 1)',
                    // padding: [0,0,14,0]
                },
                a: {
                    fontSize: 38,
                    color: 'rgba(104, 228, 255, 1)',
                     padding: [20,0,0 ,0]
                },
            },
        },
    },
    series: [
        {
            type: 'gauge',
            radius: '60%',
            clockwise: true,
            startAngle: '90',
            endAngle: '-270',
            splitNumber: 10,
            detail: {
                offsetCenter: [0, -20],
                formatter: ' ',
            },
            pointer: {
                show: false,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: [
                        [value / 100, 'rgba(0, 149, 255, 1)'],
                        [1, 'rgb(3,89,130)'],
                    ],
                    width: 30,
                   
                },
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
                length: 32,
                lineStyle: {
                    color: 'white',
                    width: 6,
                },
            },
            axisLabel: {
                show: false,
            },
        },
     
    ],
}
    
  });
  let echartsMapel = ref("");
  let opt = null;
  const echartsMap = (e) => (echartsMapel.value = e);
  const init = () => {
    let myChart = echarts.init(echartsMapel.value);
    myChart.setOption(state.option);
    const setOption = (dataObj) => {
      let opt = myChart.getOption();
      Object.assign(opt, dataObj);
      myChart.setOption(opt);
    };
    return setOption;
  };
  
  onMounted(() => {
    init();
  });
  </script>
  
  <style scoped >
  .content {
    position: relative;
    width: 100%;
    box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  }
  #mainChina {
    width: 100%;
    height: 600px;
    background-color: #00184F;
  }
  </style>
  
  
    
    
  
  
    
    `;
  };
  